<template>
  <!-- 体温card -->
  <view class="m-card" :data-id="{id}">
    <view class="info">
      <view class="date">
        <p class="day">{{getDate.day}}</p>
        <p class="year">{{getDate.year}}</p>
      </view>
      <view class="content">
        <view class="top">
          <view>
            <text class="title">{{value}}</text>
            <text class="unit">°C</text>
          </view>
          <view :class="['status', { normal: !status, error: status }]">
            <text>{{status ? '异常': '正常'}}</text>
          </view>
        </view>
        <view class="footer">
          <text>{{desc}}</text>
        </view>
      </view>

    </view>
    <view class="operate">
      <view class="icon first" @tap="handleEdit">
        <image src="../../static/img/edit.svg" alt="">
      </view>
      <view class="icon" @tap="handleDelete">
        <image src="../../static/img/delete.svg" alt="">
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    props: {
      id: [String, Number],
      value: {
        type: String,
        default: ''
      },
      status: {
        type: Number,
        default: 0
      },
      date: {
        type: String,
        default: ''
      },
      desc: {
        type: String,
        default: ''
      }
    },
    computed: {
      getDate() {
        const time = this.date.split('/')
        return {
          year: time[0],
          day: time.slice(1).join('/')
        }
      }
    },
    methods: {
      handleDelete() {
        console.log('handleDelete', this.id);
        this.$emit('onDel', this.id)
      },
      handleEdit() {
        console.log('handleEdit', this.id);
        this.$emit('onEdit', this.id)
      }
    }
  }
</script>
<style lang="scss">
  .m-card {
    padding: 20rpx;
    margin-bottom: 32rpx;
    // width: 100%;
    // height: 120rpx;
    display: flex;
    align-items: center;

    background-color: rgba(255, 255, 255, 1);
    border-radius: 24rpx;
    box-shadow: 0px 0px 30rpx rgb(41 132 248 / 10%);

    .info {
      padding-right: 40rpx;
      flex: 1;
      display: flex;
      // justify-content: space-between;
      align-items: center;
      line-height: 2;

      .content {
        margin: 0 20rpx 0 40rpx;
        flex: 1;
      }

      .top {
        // margin: 0 20rpx 0 0;
        height: 70rpx;
        display: flex;
        display: flex;
        align-items: center;
        // justify-content: space-between;
        // border-bottom: 1rpx solid rgba($color: $uni-text-color-disable, $alpha: 0.4);
      }

      .footer {
        color: #666666;
        font-size: 28rpx;
        line-height: normal;
      }
    }

    .date {
      width: 120rpx;
      line-height: 2;
      position: relative;
      text-align: center;

      .day {
        color: $uni-text-color;
      }

      .year {
        color: rgba($color: $uni-text-color, $alpha: 0.5)
      }

      &::after {
        content: "";
        display: inline-block;
        width: 2rpx;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        background-color: rgba($color: $uni-color-primary, $alpha: 0.2)
      }
    }

    .status {
      margin-left: 40rpx;
      width: 80rpx;
      height: 40rpx;
      padding: 8rpx 18rpx;
      border-radius: 40rpx;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;

      &.normal {
        color: $uni-color-success;
        background-color: rgba($color: $uni-color-success, $alpha: 0.2)
      }

      &.error {
        color: $uni-color-error;
        background-color: rgba($color: $uni-color-error, $alpha: 0.2)
      }
    }

    .operate {
      // width: 200rpx;
      display: flex;
      justify-content: space-around;
      flex-direction: column;

      .icon {
        width: 64rpx;
        height: 64rpx;
        line-height: 64rpx;
        text-align: center;
        background: #eaf3fe;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 40rpx;
          height: 40rpx;
        }
      }


    }

    .title {
      font-size: 40rpx;
    }

    .unit {
      color: $uni-text-color-disable;
    }

    .first {
      margin-bottom: 30rpx;
    }
  }
</style>